<script setup naem="chart">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { getStatistics3 } from '@/api/index.js'
import { useResizeObserver } from '@vueuse/core'

// 固定数据
const options = [
  {
    text: '1 个月',
    value: 'month',
  },
  {
    text: '1 周',
    value: 'week',
  },
  {
    text: '24小时',
    value: 'hour',
  },
]

// 默认选中
const current = ref('week')

// 防抖
let timer = null
// 图表节点
const el = ref(null)

// 标签点击事件
const handleSelected = type => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    current.value = type
    getData()
  }, 500)
}

// 获取图表数据
const getData = async () => {
  let option = {
    xAxis: {
      type: 'category',
      data: [],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' },
            ]),
          },
        },
      },
    ],
  }
  // 显示加载动画
  myChart.showLoading()
  // 调用请求方法获取数据
  const res = await getStatistics3(current.value)
  // 赋值
  option.xAxis.data = res.x
  option.series[0].data = res.y
  // 设置调用生成图表方法
  myChart.setOption(option)
  // 关闭加载动画
  myChart.hideLoading()
}
// 图表实例
let myChart = null
// 页面渲染时
onMounted(() => {
  let chartDom = document.getElementById('chart')
  if (chartDom) {
    myChart = echarts.init(chartDom)
    getData()
  }
})
// 页面卸载前
onBeforeUnmount(() => {
  // 如果有图标实例，则将其销毁
  if (myChart) echarts.dispose(myChart)
})
useResizeObserver(el, () => myChart.resize())
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="chart-header">
        <span class="title">订单统计</span>
        <div class="check-tag">
          <el-check-tag
            v-for="(item, index) in options"
            :key="index"
            :checked="current === item.value"
            size="small"
            @click="handleSelected(item.value)"
          >
            {{ item.text }}
          </el-check-tag>
        </div>
      </div>
    </template>
    <div ref="el" id="chart" style="width: 100%; height: 292px"></div>
  </el-card>
</template>

<style lang="scss" scoped>
.chart-header {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  .title {
    font-size: var(--text-sm);
  }
  .check-tag {
    padding-left: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    .el-check-tag {
      margin-right: 4px;
      font-size: var(--text-sm);
      text-align: center;
      padding: 7px 10px;
    }
  }
}
</style>
